<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">活动详情</view>
			<view class="blank"></view>
		</view>
		<scroll-view scroll-y :hidden='!posterHidden'>
			<view class="whole">
				<view class="my_draw_canvas poster my_canvas" id="my-canvas">
					<view class="my_draw_canvas welcome" data-type="text" data-text="邀您参加">邀您参加</view>
					<image crossorigin="anonymous" class="my_draw_canvas cover" :src="activityInfo.image2" data-type="image"
						:data-url="activityInfo.image2" mode="" />
					<view class="my_draw_canvas box">
						<view class="my_draw_canvas title" data-type="text" :data-text="activityInfo.name">
							{{activityInfo.name}}</view>
						<view class="my_draw_canvas line">
							<image class="my_draw_canvas" src="/static/img/time.png" data-type="image"
								data-url="/static/img/time.png" mode="" />
							<text class="my_draw_canvas" data-type="text" data-text="时间">时间</text>
							<view class="my_draw_canvas info" data-type="text"
								:data-text="activityInfo.activityTime">{{activityInfo.activityTime}}</view>
						</view>
						<view class="my_draw_canvas line">
							<image class="my_draw_canvas" src="/static/img/local.png" data-type="image"
								data-url="/static/img/local.png" mode="" />
							<text class="my_draw_canvas" data-type="text" data-text="地点">地点</text>
							<view class="my_draw_canvas info" data-type="text" :data-text="activityInfo.address">
								{{activityInfo.address}}</view>
						</view>
						<view class="my_draw_canvas line">
							<image class="my_draw_canvas" src="/static/img/person.png" data-type="image"
								data-url="/static/img/person.png" mode="" />
							<text class="my_draw_canvas" data-type="text" data-text="人数">人数</text>
							<view class="my_draw_canvas info" data-type="text"
								:data-text="`${activityInfo.limitNum}人以内 报满即止 男女比例1:1`">{{activityInfo.limitNum}}人以内 报满即止
								男女比例1 : 1</view>
						</view>
					</view>
					<image class="my_draw_canvas code" src="/static/img/applet-code.png" data-type="image"
						data-url="/static/img/applet-code.png" mode="" />
					<view class="my_draw_canvas tip" data-type="text" data-text="长按二维码了解详情">长按二维码了解详情</view>
					<image class="my_draw_canvas poster-bg" src="/static/img/poster-bg.png" data-type="image"
						data-url="/static/img/poster-bg.png" mode="" />
				</view>
			</view>
			<view v-if="canvasHidden" class="save" @click="drawMyCanvas">
				保存到本地
			</view>
		</scroll-view>
<!-- 		<view class="canvas" :hidden='canvasHidden'>
			<canvas canvas-id="myCanvas" class="myCanvas">
			</canvas>
		</view> -->
			<!-- <image class="canvas" :hidden='canvasHidden' :src="imgUrl" mode=""></image> -->
	</view>
</template>

<script>
	import html2canvas from 'html2canvas'
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				width: 0,
				height: 0,
				imgUrl: '',
				activityId: '',
				activityInfo: {},
				posterHidden: true,
				canvasHidden: true,
			}
		},
		onLoad(option) {
			console.log(option, 'option');
			this.activityId = option.id
			this.initInfo()
		},
		methods: {
			initInfo() {
				let that = this
				request(`/activity/detail/${that.activityId}`).then((res) => {
					console.log(res.data.data, 'initInfo');
					that.activityInfo = res.data.data
				})
			},
			drawMyCanvas() {
				// uni.showLoading()
				const that = this
				
				// let xhr = new XMLHttpRequest();
				// xhr.open('GET', 'https://asetdisk.oss-cn-beijing.aliyuncs.com/marriage/picture/011213aa-1d80-47ad-9ab2-29876059a4e0.jpg', true);
				// // xhr.responseType = 'blob';
				// xhr.onload = function() {
				//   if (this.status == 200) {
				// 	let blob = this.response;
				// 	console.log(this.response,'this.response');
				//   }
				// };
				// xhr.send();
				
				new html2canvas(document.getElementById('my-canvas'), {
					 backgroundColor: "transparent",  //png图片透明
					 allowTaint: false, //  显示图片
					 useCORS: true  //允许跨域
					}).then(canvas => {
						// that.canvasHidden = false
						// var img = document.createElement('img');
						// img.src = canvas.toDataURL('image/png');
						// // 创建一个链接元素
						// var link = document.createElement('a');
						// link.href = img.src;
						// link.download = 'activity.png';
						// link.click();
						// that.imgUrl = canvas.toDataURL('image/png')
						// console.log(canvas.toDataURL('image/png'),'asdgsdg');
						uni.previewImage({
							urls: [canvas.toDataURL('image/png')],
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					});
			},
		}
	}
</script>

<style lang="scss">
	scroll-view {
		height: 90vh;
		margin-top: -2vh;
	}

	.canvas, {
		position: fixed;
		z-index: 9999;
		top: 12vh;
		left: 0;
		height: 1150rpx;
		width: 100vw;
		padding: 2vw 8vw;
		background-color: rgba(235, 235, 255, 1);
	}

	canvas {
		height: 1150rpx;
		width: 84vw;
		border-radius: 40rpx;
	}

	.whole {
		// height: 68vh;
		margin-top: 0;
		padding: 50rpx;
		background-color: rgba(235, 235, 255, 1);

	}

	.page_title {
		position: relative;
		z-index: 99;
	}

	.poster {
		position: relative;
		z-index: 1;
		padding: 50rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 1);

		.welcome {
			font-size: 60rpx;
			font-family: 'Alimama_ShuHeiTi_Bold';
			color: rgba(107, 107, 255, 1);
		}

		.cover {
			width: 100%;
			height: 280rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
		}

		.code {
			display: block;
			width: 320rpx;
			height: 300rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 20rpx;
		}

		.tip {
			text-align: center;
			font-weight: 500;
			margin-top: 10rpx;
		}

		.poster-bg {
			width: 570rpx;
			height: 450rpx;
			position: absolute;
			right: 10rpx;
			bottom: 0;
			z-index: 0;
		}
	}

	.box {
		margin-top: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 52rpx;
		}

		.info {
			font-size: 24rpx;
			color: rgba(107, 107, 255, 1);
			margin-top: 10rpx;
		}

		.line {
			display: flex;
			margin-top: 10rpx;
			font-weight: 500;
			align-items: center;

			text {
				font-size: 24rpx;
				margin-right: 15rpx;
			}

			image {
				width: 24rpx;
				height: 26rpx;
				margin: 10rpx;
			}
		}
	}

	.save {
		width: 80%;
		margin: 15rpx auto;
		line-height: 100rpx;
		text-align: center;
		color: aliceblue;
		z-index: 100;
		border-radius: 60rpx;
		font-weight: 500;
		background-color: rgba(156, 156, 255, 1);
	}
</style>